<script lang="ts" setup>
import { reactive, ref } from 'vue';
// typescript
const popupRef = ref();
const state = reactive({
  active: 0,
  priceSort: ""
});
const filter = reactive({
  minPrice: undefined as undefined | number,
  maxPrice: undefined as undefined | number,
});

// 切换排序
const onTabSort = (index: number) => {
  state.active = index;

  if (index == 2) {
    state.priceSort = state.priceSort == 'asc' ? 'desc' : 'asc';
  }
}

// 筛选确认
const onFilterConfirm = () => {
  popupRef.value && popupRef.value.close();
}

// 筛选表单重置
const onFilterFormReset = () => {
  filter.maxPrice = undefined;
  filter.minPrice = undefined;
}

// 显示筛选弹出
const onShowPopup = () => {
  popupRef.value && popupRef.value.open("right");
}
</script>

<!-- 商品分类页面 -->
<template>
  <view class="container">
    <!-- 筛选、排序头部 -->
    <view class="filter-header">
      <view :class="{actived: state.active == 0}" @click="onTabSort(0)">综合</view>
      <view :class="{actived: state.active == 1}" @click="onTabSort(1)">销量</view>
      <view class="price-sort" :class="{actived: state.active == 2}" @click="onTabSort(2)">
        <text>价格</text>
        <w-sort-icon :sort="state.priceSort" />
      </view>
      <view @click="onShowPopup">筛选<text class="iconfont">&#xe671;</text></view>
    </view>
    <!-- 商品列表 -->
    <view class="commodity-list">
      <w-commodity-card-list></w-commodity-card-list>
    </view>
    <!-- 筛选弹出框 -->
    <uni-popup :background-color="('#fff' as any)" ref="popupRef">
      <view class="popup-body">
        <view class="form-view">
          <uni-section title="价格区间">
            <view class="price-range">
              <view class="input-view">
                <uni-easyinput type="number" trim="both" v-model="filter.minPrice" placeholder="最低价" />
              </view>
              <view class="line">-</view>
              <view class="input-view">
                <uni-easyinput type="number" trim="both" v-model="filter.maxPrice" placeholder="最高价" />
              </view>
            </view>
          </uni-section>
        </view>

        <view class="button-view">
          <button @click="onFilterFormReset" class="custom-button">重置</button>
          <button @click="onFilterConfirm" class="custom-button custom-button-primary">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
// scss
$filter-height: 80rpx;
.container {
  padding-top: $filter-height;
}
.filter-header {
  height: $filter-height;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  /* #ifdef H5 */
  top: 44px;
  /* #endif */
  background-color: #fff;
  border-bottom: 1px solid $border-color;
  z-index: 5;
  display: flex;
  align-items: center;

  > view {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid transparent;
    font-size: 28rpx;

    &.actived {
      border-bottom-color: $primary-color;
      color: $primary-color;
    }
  }

  .price-sort {
    text {
      margin-right: 10rpx;
    }
  }
}
.commodity-list {
  background-color: #fff;
}

.popup-body {
  padding: 30rpx;
  display: flex;
  height: calc(100% - 60rpx);
  flex-direction: column;

  :deep(.uni-section) {
    .uni-section-header {
      padding-left: 0;
    }
  }

  .form-view {
    flex: 1;
  }

  .button-view {
    margin-top: 40rpx;
    text-align: right;
    button {
      border-radius: 999px;
      width: 160rpx;
      height: 60rpx;
      
      &:first-child {
        margin-right: 10rpx;
      }
    }
  }

  .price-range {
    display: flex;
    align-items: center;

    .input-view {
      width: 200rpx;

      :deep(.uni-easyinput) {
        .uni-easyinput__content {
          border-radius: 999px;
          height: 60rpx;
        }
      }
    }

    .line {
      margin: 0 10rpx;
    }
  }
}
</style>
